<template>
	<view class="box">
		<u-overlay :show="tipShow">
			<view class="boxsd">
				<image class="bg"
					src="https://images.fudiemall.com/storage/default/20250630/mao2e7c0edfc21dc536c4c7b03262de16caa5b39b6b.png"
					mode="aspectFill"></image>
				<view class="maintop">
					<image class="headimg" :src="info.red.user&&info.red.user.avatar" mode="aspectFill"></image>
					<view class="name">
						{{info.red.name}}
					</view>
					<image class="tag" v-if="info.red.type_red==1"
						src="https://images.fudiemall.com/storage/default/20250627/pin06b91c8d9ca48e37e4191523462c1d5d4aee193c.png"
						mode="aspectFill"></image>
				</view>
				<view class="cont">
					{{info.red.remark}}
				</view>
				<image @click.stop="triggerRotation" v-if="info.red.status==0&&info.is_robbed==false"
					:class="{'fast-rotating': isRotating}" class="open"
					src="https://images.fudiemall.com/storage/default/20250630/openfaf0e9b9fa765b5b760edc05ed50f5f1aae7b7ff.png"
					mode="aspectFill"></image>

				<view class="tips" v-if="info.red.status==1&&info.is_robbed==false" @click="gonext">
					查看大家手气 <u-icon name="arrow-right"  color="#EBCD99" size="16"></u-icon>
				</view>
				<view class="tips" v-if="info.red.status==2">
					前往福叠猫 <u-icon name="arrow-right"  color="#EBCD99" size="16"></u-icon>
					
				</view>
			</view>
		</u-overlay>
	</view>
</template>

<script>
	import {
		preRob,
		robRed
	} from "../../api/red.js"
	export default {
		data() {
			return {
				tipShow: false,
				isRotating: false,
				id: "",
				info: {
					red: {}
				}
			}
		},
		onLoad(e) {
			this.id = e.id
			if (e.invite_code) {
				if (!uni.getStorageSync("token")) {

					uni.setStorageSync('inviteCode', e.invite_code)
					uni.setStorageSync('red_id', e.id)
					if (uni.getStorageSync("seller_id")) {
						uni.removeStorageSync("seller_id")
					}
					uni.setStorageSync("quick_pay", `/pageUser/redEnvelope/openRedEnvelope?id=${this.id}`)

				} else {
					uni.removeStorageSync("quick_pay")

				}



			}
			this.getstatus()
		},

		methods: {
			getstatus() {
				preRob({
					red_id: this.id
				}).then(res => {
					this.info = res.data
					if (res.data.is_robbed) {
						this.gonext()
					} else {
						this.tipShow = true
					}
				})
			},
			gonext() {
				uni.redirectTo({
					url: "/pageUser/redEnvelope/getRedEnvelope?id=" + this.info.red.id
				})
			},
			triggerRotation() {
				if (this.isRotating) return;
				this.isRotating = true;
				setTimeout(() => {
					robRed({
						red_id: this.id
					}).then(res => {
						this.isRotating = false;
						if (res.code == 1) {
							if (res.data.is_robbed) {
								uni.redirectTo({
									url: "/pageUser/redEnvelope/getRedEnvelope?id=" + res.data.red
										.id
								})
							} else {
								this.getstatus()
							}

						}

					})



				}, 1500); // 匹配动画时长
			}
		},
	}
</script>

<style lang="scss">
	.box {
		width: 750rpx;
		height: 1624rpx;
		position: relative;
	}

	.boxsd {

		width: 630rpx;
		height: 900rpx;
		display: flex;
		align-items: center;
		justify-self: center;
		position: absolute;
		top: 15%;
		left: 50%;
		transform: translate(-50%);

		.bg {
			position: absolute;
			top: 0;
			left: 0;
			margin: 0 auto;
			width: 630rpx;
			height: 900rpx;
			object-fit: cover;
			/* 保持图片比例 */
		}
	}

	.maintop {
		width: 630rpx;
		// margin-top: 72rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 160rpx;

	}


	.headimg {
		width: 56rpx;
		height: 56rpx;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
	}

	.name {
		max-width: 300rpx;
		font-weight: 400;
		font-size: 36rpx;
		color: #EBCD99;
		margin-left: 24rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.tag {
		width: 30rpx;
		height: 30rpx;
		margin-left: 20rpx;

	}

	.cont {
		left: 50%;
		transform: translateX(-50%);
		position: absolute;
		top: 284rpx;
		width: 532rpx;
		height: 86rpx;
		font-family: Source Han Sans, Source Han Sans;
		font-weight: 700;
		font-size: 59rpx;
		color: #EBCD99;
		line-height: 86rpx;
		text-align: center;
		font-style: normal;
		text-transform: none;
	}

	.open {
		width: 214rpx;
		height: 214rpx;
		position: absolute;
		bottom: 54rpx;
		left: 50%;
		transform: translateX(-50%);
		transform-style: preserve-3d;
		backface-visibility: hidden;
		will-change: transform;
		transition: transform 0.3s;
		/* 非动画时的过渡效果 */
	}

	.fast-rotating {
		animation: fastRotation 3s ease-in infinite;
	}


	@keyframes fastRotation {
		0% {
			transform: translateX(-50%) rotateY(0deg);
		}

		100% {
			transform: translateX(-50%) rotateY(7200deg);
			/* 15圈 × 360度 */
		}
	}

	.tips {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 690rpx;
		text-align: center;
		height: 40rpx;
		font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
		font-weight: 400;
		font-size: 28rpx;
		color: #EBCD99;
		position: absolute;
		bottom: 40rpx;
		left: 50%;
		transform: translateX(-50%);
	}
</style>